<template>
  <UseDark v-slot="{ isDark, switchMode }">
    <!-- 工具栏 -->
    <div
      :class="[
        'tools-nav',
        {
          'div-dark': isDark,
          'div-light': !isDark
        }
      ]"
    >
      <ul class="left">
        <!-- <li>
          <Switch class="switch" sliderBgUncheck="#2196F3" @click="($event) => switchMode()" />
        </li> -->
        <li class="auth">
          <!-- 一些内容 -->
          <RouterLink to="/auth">登陆/注册</RouterLink>
        </li>
      </ul>

      <span class="time">
        <jc-icon name="time" />
        <span class="time-text"> {{ timeText }} </span>
      </span>

      <ul class="right">
        <li @click="($event) => refresh()" class="refresh">
          <!--TODO: 图标名应该从 reflesh 改为 refresh-->
          <jc-icon name="reflesh-color" />
        </li>
        <li class="mode-toggle" @click="($event) => switchMode()">
          <jc-icon v-if="isDark" name="day-sun-color" />
          <jc-icon v-else name="day-moon-color" />
        </li>
        <li class="prtSc">
          <jc-icon name="printer-color" />
        </li>
        <li class="">
          <jc-icon-0 name="language3" />
        </li>
      </ul>
    </div>
  </UseDark>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { Ref } from 'vue'
import UseDark from '@/apps/dark/UseDark.vue'

function refresh() {
  window.location.reload()
}

const timeText: Ref<string> = ref('')

timeText.value = new Date().toISOString()
</script>

<style lang="scss" scoped>
div.tools-nav {
  width: 100%;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .time {
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    .jc-icons {
      color: red;
    }
  }
  ul.right {
    li {
      height: 22px;
      &.mode-toggle {
        color: #ffffff !important;
        /* .jc-icons{
          color: #ffffff !important;
        } */
      }
    }
  }

  &.div-dark {
    $dark-bg-div: rgb(0, 0, 0);
    background-color: $dark-bg-div;
    color: #ffffff;
    ul.left {
      li.auth {
        a {
          color: rgb(26, 154, 0);
          text-decoration: none;
        }
      }
    }

    ul.right {
      background-color: #ffffff;
      li {
        background-color: $dark-bg-div;
        &:hover {
          background-color: rgb(39, 39, 39);
        }
      }
    }
  }

  &.div-light {
    $light-bg-div: #ffffff;
    background-color: $light-bg-div;
    border: solid 1px #cdcdcd;
    ul.left {
      li.auth {
        a {
          color: rgb(26, 154, 0);
          text-decoration: none;
        }
      }
    }
    ul.right {
      background-color: #000000;
      li {
        background-color: $light-bg-div;
        &:hover {
          background-color: rgb(179, 179, 179);
        }
      }
    }
  }

  ul.right {
    /* display: flex; */
    /* flex-wrap: nowrap; */
    display: grid;
    grid: 'tool tool tool tool';
    grid-gap: 1px;
    user-select: none;
    li {
      width: 26px;
      list-style: none;
      /* text-align: center; */
      display: grid;
      place-items: center;
      cursor: pointer;
    }
  }

  ul.left {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    user-select: none;
    li {
      list-style: none;

      .switch {
        scale: 0.7;
      }
    }
  }
}
</style>
